<template>
	<view class="sub-goods-item">
		<view class="left">
		<view class="top-title">
			<view class="leftContent">
				{{$t('subscribed.packageService')}} {{item.autoPlan?$t('subscribed.autoPlan'):''}}
			</view>
		</view>
		<view class="package-type">
			{{item.name}}
		</view>
		<view class="package-money—bg" v-if="item.autoPlan">
			${{item.price}}/month. Billed monthly
		</view>
		<view class="package-money—bg" v-else>
			${{item.price}}
		</view>
		<view class="package-price">
			<text style="font-size: 30rpx;">$</text>
			<text style="font-size: 40rpx;margin-left: 10rpx;">{{item.price}}</text>
		</view>
	</view>
	<view class="right" @click="showDetail(item)">
		<uni-icons  type="info-filled" size="34" color="#666"></uni-icons>
		<text style="font-size:28rpx;">{{$t('subscribed.detail')}}</text>
	</view>
	</view>
</template>

<script setup>
	import {onLoad} from "@dcloudio/uni-app";
	import { ref} from "vue";

	onLoad(() => {

	})
	const emits = defineEmits(['childShowDetail']);
	const showDetail=(item)=>{
		emits('childShowDetail',item)
	}
	defineProps({
		item: {
			type: Object,
			default () {
				return {
					"id": 2,
					"name": "1 month Plan", //商品名称
					"price": 9.99, //价格
					"currency": "USD", //货币,USD EUR
					"months": 1, //为几个月的
					"detail": "qqqq", //详情
					"autoPlan": 1, //是否为订阅计划
				}
			}
		}
	})
</script>

<style lang="scss" scoped>
	.sub-goods-item {
		margin: 30rpx 30rpx;
		padding: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0px 0px 10rpx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #333;
		.left {
			.top-title {
				font-size: 30rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.leftContent{
					
				}
				.rightContent{
					
				}
			}

			.package-type {
				font-size: 34rpx;
				margin-top: 20rpx;
			}

			.package-money—bg {
				background-color: #f3f3f3;
				border-radius: 10rpx;
				color: #333;
				font-size: 26rpx;
				display: inline-block;
				margin-top: 20rpx;
				padding: 20rpx;
			}

			.package-price {
				margin-top: 20rpx;
			}
		}

		.right {
			display: flex;
			align-items: center;
			// :deep() {
			// 	.uni-icons {
			// 		color: green !important;
			// 	}
			// }
		}
	}
</style>